// 精彩评论页面

<template>
  <div class="comment">
    <myheader title="精彩评论">
      <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
    </myheader>
    <!-- 列表 -->
    <div class="lists">
      <div class="item" v-for="v in commentLists" :key="v.id">
        <div class="head">
          <img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/196/196.jpg" alt />
          <div class="center">
            <p>{{v.user.nickname}}</p>
            <i>2小时前</i>
          </div>
          <span @click="sendComment(v)">回复</span>
        </div>
        <!-- 把子级评论放在这 -->
        <commentItem
          v-if="v.parent"
          :parent="v.parent"
          @replyComment="sendComment"
        ></commentItem>
        <!-- 主评论 -->
        <div class="text">{{v.content}}</div>
      </div>
    </div>
    <commentFooter
      :post="article"
      @refresh="refreshList"
      :currentComment="comment"
      @resetComment="comment=null"
    ></commentFooter>
  </div>
</template>

<script>
import myheader from "@/components/myheader";
import { getCommentList, getArtDetail } from "@/apis/articles";
import myaxios from "@/utils/myaxios";
import commentItem from "@/components/commentItem.vue";
import commentFooter from "@/components/commentFooter";
export default {
  data() {
    return {
      commentLists: Array,
      article: {},
      comment: {}, // 添加第三者，来传递包含id的数据
    };
  },
  components: {
    myheader,
    commentItem,
    commentFooter,
  },
  methods: {
    // 回复评论
    sendComment(value) {
      console.log(value);
      this.comment = value;
    },
    // 刷新页面
    refreshList() {
      // 重新加载
      this.init();
      // 回到顶部
      scrollTo(0, 0);
    },
    // 封装数据加载方法
    async init() {
      // 获取当前文章的评论数据
      let res = await getCommentList(this.$route.params.id, {
        pageSize: 50,
        pageIndex: 1,
      });
      // console.log(res);
      this.commentLists = res.data.data.map((value) => {
        value.user.head_img = myaxios.defaults.baseURL + value.user.head_img;
        return value;
      });
      console.log(this.commentLists);
      let res2 = await getArtDetail(this.$route.params.id);
      this.article = res2.data.data;
    },
  },
  async mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
.comment {
  .myheader {
    position: fixed;
    top: 0;
  }
  .lists {
    border-top: 5 * 100vw/360 solid #ddd;
    padding: 0 15 * 100vw/360;
    margin-top: 50 * 100vw/360;
    .item {
      padding: 10 * 100vw/360 0;
      border-bottom: 1 * 100vw/360 solid #ccc;
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > img {
          width: 50/360 * 100vw;
          height: 50/360 * 100vw;
          display: block;
          border-radius: 50%;
        }
        > .center {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 10 * 100vw/360;
          > i {
            font-size: 12 * 100vw/360;
            color: #999;
            line-height: 25 * 100vw/360;
          }
        }
        > span {
          color: #999;
          font-size: 13 * 100vw/360;
        }
      }
      .text {
        font-size: 14 * 100vw/360;
        color: #333;
        padding: 20 * 100vw/360 0 10 * 100vw/360 0;
      }
    }
  }
}
</style>